<template>
	<view class="chat">
		<view class="chat-type">
			<view :class="{active : !isShow}" @click="isShow = false">全部</view>
			<view :class="{active : isShow}" @click="isShow = true">系统消息</view>
		</view>
		<view class="content" v-show="!isShow">
			<view class="item">
				<view class="txt">
					<image src="../../static/images/Beautifulchildish.png" mode=""></image>
					<view class="userInfo">
						<view class="username">王奎玉</view>
						<view class="receive">收到</view>
					</view>
				</view>
				<view class="time">上午8:18</view>
			</view>
			
			<view class="item">
				<view class="txt">
					<image src="../../static/images/Beautifulchildish.png" mode=""></image>
					<view class="userInfo">
						<view class="username">刘志轩</view>
						<view class="receive">收到</view>
					</view>
				</view>
				<view class="time">上午8:18</view>
			</view>
			
			<view class="item">
				<view class="txt">
					<image src="../../static/images/Beautifulchildish.png" mode=""></image>
					<view class="userInfo">
						<view class="username">黄瑞鑫</view>
						<view class="receive">家里暖气不热了，能派人过来修吗</view>
					</view>
				</view>
				<view class="time">上午8:18</view>
			</view>
			
			<view class="item">
				<view class="txt">
					<image src="../../static/images/Beautifulchildish.png" mode=""></image>
					<view class="userInfo">
						<view class="username">王德然</view>
						<view class="receive">家里暖气不热了，能派人过来修吗</view>
					</view>
				</view>
				<view class="time">上午8:18</view>
			</view>
			
			<view class="item">
				<view class="txt">
					<image src="../../static/images/Beautifulchildish.png" mode=""></image>
					<view class="userInfo">
						<view class="username">秦彤彤</view>
						<view class="receive">家里暖气不热了，能派人过来修吗</view>
					</view>
				</view>
				<view class="time">上午8:18</view>
			</view>
		</view>
		
		<view class="content" v-show="isShow">
			<view class="item">
				<view class="txt">
					<image src="/static/images/firstWomen.jpg" mode=""></image>
					<view class="userInfo">
						<view class="username">蔡徐坤</view>
						<view class="receive">家里暖气不热了，能派人过来修吗</view>
					</view>
				</view>
				<view class="time">下午9:19</view>
			</view>
			
			<view class="item">
				<view class="txt">
					<image src="/static/images/firstWomen.jpg" mode=""></image>
					<view class="userInfo">
						<view class="username">吴亦凡</view>
						<view class="receive">家里暖气不热了，能派人过来修吗</view>
					</view>
				</view>
				<view class="time">下午9:19</view>
			</view>
			
			<view class="item">
				<view class="txt">
					<image src="/static/images/firstWomen.jpg" mode=""></image>
					<view class="userInfo">
						<view class="username">彭于晏</view>
						<view class="receive">家里暖气不热了，能派人过来修吗</view>
					</view>
				</view>
				<view class="time">下午9:19</view>
			</view>
			
			<view class="item">
				<view class="txt">
					<image src="/static/images/firstWomen.jpg" mode=""></image>
					<view class="userInfo">
						<view class="username">吴彦祖</view>
						<view class="receive">收到</view>
					</view>
				</view>
				<view class="time">下午9:19</view>
			</view>
			
			<view class="item">
				<view class="txt">
					<image src="/static/images/firstWomen.jpg" mode=""></image>
					<view class="userInfo">
						<view class="username">黎明</view>
						<view class="receive">收到</view>
					</view>
				</view>
				<view class="time">下午9:19</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// 去除微信小程序生成多一层标签
		options : {
			virtualHost : true
		},
		data() {
			return {
				isShow : false
			};
		},
	}
</script>

<style lang="less">
	.chat{
		padding: 0 15rpx;
		.chat-type{
			padding: 0 45rpx;
			padding-bottom: 38rpx;
			border-bottom: 1rpx solid #e7e7e7;
			display: flex;
			justify-content: space-between;
			color: #666666;
			font-size: 32rpx;
			.active{
				color: #3b87f6;
			}
		}
		.content{
			padding: 0 30rpx;
			padding-top: 72rpx;
			.item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 35rpx;
				.txt{
					display: flex;
					image{
						width: 95rpx;
						height: 95rpx;
						border-radius: 15rpx;
					}
					.userInfo{
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding-left: 30rpx;
						.username{
							font-size: 28rpx;
							color: #090a0d;
						}
						.receive{
							padding-top: 8rpx;
							font-size: 26rpx;
							color: #9fa0a2;
						}
					}
				}
				.time{
					color: #cccdcd;
					font-size: 28rpx;
				}
			}
		}
	}
</style>